<html>
    <title>warp</title>
    <style>
        .wrap{
            width: 400px;
            background: #666;
        }
        .wrap img{
            width: 80%;
            margin: 20px;
        }
        .fl{
            float: left;
        }
        .cle{
            /* clear: both; */
        }
/* 图片浮动之后看不到父盒子wrap。因为wrap没有设定高度，他的高度需要靠img的高度来计算。
img浮动了，脱离了普通文档流，wrap计算高度时不能得到img的高度，所以wrap看不到了。 
加了clear:both的元素，左右都不可以出现浮动元素，也就是在普通文档流中。
为了给它确定的位置需要再次获得img的高度，这样cle的元素高度确定了，同时也确定了父元素的高度。
*/
    </style>
    <body>
        <div class="wrap">
            <img class="fl" src="../img/1621216907(1).png" alt="">
            <div class="cle"></div>
        </div>
    </body>
</html>